<template>
  <div class="user-info">
    <div class="_label pa-ai-center">
      <span class="star">*</span>
      <span>头像</span>
    </div>
    <el-avatar :size="170" :src="userInfo.headPortrait"></el-avatar>
    <el-upload
      class="upload-demo"
      action="http://zhmsbgapi.wenkangkeji.com/common/interface/upload_img"
      multiple
      :limit="1"
      :file-list="fileList"
      :http-request="handleRequest"
      :show-file-list="false"
    >
      <el-button style="margin-top:23px;margin-left:37px" type="primary" size="medium">上传头像</el-button>
    </el-upload>
    <div class="_label pa-ai-center">
      <span class="star">*</span>
      <span>姓名</span>
    </div>
    <el-input class="ipt" v-model="userInfo.realname" placeholder="姓名"></el-input>
    <div class="_label pa-ai-center">
      <span class="star">*</span>
      <span>手机号</span>
    </div>
    <el-input class="ipt" v-model="userInfo.mobile" type="number" placeholder="手机号" :maxlength="11"></el-input>
    <div v-if="roleType==='1'" class="_label pa-ai-center">
      <span>窗口类型</span>
    </div>
    <el-select v-if="roleType==='1'" v-model="userInfo.window" placeholder="窗口类型">
      <el-option
        v-for="item in pabceeegjlorttData"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      ></el-option>
    </el-select>
    <div>
      <el-button style="margin-top:62px" type="primary" size="medium" @click="updateUserInfo()">保存</el-button>
    </div>
  </div>
</template>
<script>
import { uploadImage, GetUserInfo, updateUserInfo } from '@/api/commonApi'
export default {
  data () {
    return {
      userInfo: {
        realname: '', headPortrait: ''
      },
      roleType: '0',
      fileList: [],
      pabceeegjlorttData: [
        // {
        //   label: '全部',
        //   value: -1
        // },
        {
          label: '投资项目',
          value: 1
        },
        {
          label: '发改',
          value: 2
        },
        {
          label: '生态环境资规',
          value: 3
        },
        {
          label: '建交',
          value: 4
        },
        {
          label: '综合执法',
          value: 5
        },
        {
          label: '审核',
          value: 6
        },

      ],// 窗口类型 1 投资项目，2发改，3生态环境资规，4建交，5综合执法，6审核 -1全部
    }
  },
  created () {
    this.getData()
    this.roleType = localStorage.getItem('X-Role-Type') || '0'
  },
  methods: {
    getData () {
      GetUserInfo({ id: JSON.parse(localStorage.getItem('P-User-Info')).id }).then((res) => {
        this.userInfo = res.data
        localStorage.setItem('P-User-Info', JSON.stringify(res.data))
      })
    },
    updateUserInfo () {
      if (!this.userInfo.headPortrait) {
        return this.$message({
          message: '请上传头像',
          type: "error"
        });
      }
      if (!this.userInfo.realname) {
        return this.$message({
          message: '请填写姓名',
          type: "error"
        });
      }
      if (!this.userInfo.mobile) {
        return this.$message({
          message: '请填写手机号',
          type: "error"
        });
      }
      updateUserInfo({
        id: this.userInfo.id,
        realname: this.userInfo.realname,
        headPortrait: this.userInfo.headPortrait,
        mobile: this.userInfo.mobile,
        window: this.userInfo.window,
      }).then((res) => {
        this.$message.success(res.msg)
        location.reload()
      })
    },
    async handleRequest (file) {
      const formData = new FormData()
      formData.append('file', file.file)
      const res = await uploadImage(formData)
      if (res.code == 0) {
        this.userInfo.headPortrait = res.imgUrl
        this.$message.success('上传成功')
      } else {
        this.$message.error('上传失败')
      }
    },
  }
}
</script>
<style scoped lang='scss'>
.user-info {
  background: #ffffff;
  box-shadow: 0px 6px 58px 0px rgba(196, 203, 214, 0.1);
  border-radius: 24px;
  padding-left: 74px;
  padding-top: 48px;
  padding-bottom: 161px;
  ._label {
    font-size: 14px;
    font-family: Source Han Sans CN;
    font-weight: 400;
    margin-bottom: 12px;
    .star {
      color: #fd0303;
    }
  }
  .upload-demo {
    margin-bottom: 21px;
  }
}
::v-deep .ipt .el-input__inner {
  width: 572px;
  height: 40px;
  border: 1px solid #b6b6b6;
  border-radius: 10px;
  margin-bottom: 30px;
}
</style>